<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>直播源管理</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 
	
	<!-- ZUI 标准版压缩后的 CSS 文件 -->
	<link rel="stylesheet" href="/css/zui.min.css">
	<link rel="stylesheet" href="/css/zui.uploader.min.css">			
	
</head>
<body>

<div class="container-fixed">
<div class="panel load-indicator" data-loading="正在处理...">
  <div class="panel-body">
  		
  		<div id='uploader-live' class="uploader" data-ride="uploader" data-url="/admin/live/add">
		  <div class="uploader-message text-center">
		    <div class="content"></div>
		    <button type="button" class="close">×</button>
		  </div>
		  <div class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>
		  <div class="uploader-actions">
		    <div class="uploader-status pull-right text-muted"></div>
		    <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
		    <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
		  </div>
		</div>
		
		<div class="result-progress">
			
  		</div>
  </div>
</div>
</div>

</body>



<!-- ZUI Javascript 依赖 jQuery -->
<script type="text/javascript" src="/js/jquery.js"></script>
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script type="text/javascript" src="/js/zui.min.js"></script>
<script type="text/javascript" src="/js/zui.uploader.min.js"></script>
<!-- Art-Template.js -->
<script type="text/javascript" src="/js/template-web.min.js"></script>

<!-- 模板 -->
<script id="live-progress-template" type="text/html">

<!-- 动画效果 -->
<div class="progress {{if data.pass == null}}progress-striped active{{/if}}">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: {{data.progress}};">
  	<div class="pull-right" style="font-weight: bolder;">{{data.progress}}</div>
  </div>
</div>
<div class="result {{if data.pass == null}}hidden{{/if}}"><span style="font-weight: bolder;">已完成，总共：{{data.total}}，<span style="color: green;">通过：{{data.pass}}</span></span></div>

</script>

<script>
	
/** 定时器 */
var timer;	

/** 文件上传组件 */
$('#uploader-live').uploader({
    url: '/admin/live/add',
    responseHandler: function(responseObject, file){
		console.log(responseObject);
		check_process();
		timer = setInterval(function(){
			check_process();
		}, 5000);
	}
});


/** 查看直播源解析情况 */
var check_process = function(){
	$.ajax({
        url: '/admin/live/add/process',
        type: 'get',
        success: function (res) {
			
            var total = res.total;
            var have = res.have;
            
            if(total == 0){
				return;
			}
            
            var progress = (have*100/total).toFixed(2);           
            var data = {};
            data.progress = progress + "%";
            data.total = total;
            data.have = have;
            data.pass = res.pass
            
            let result = template('live-progress-template',{'data' : data});  //===注意点:  模板上得rows要跟template上得rows对应
       		$('.result-progress').html(result) //===直接赋值就可以实现了
            
            if(have >= total){
				// 停止计时器
				clearInterval(timer);
			}
        },
        error: function(err){
			new $.zui.Messager('查看进度失败', {
			    type: 'danger' // 定义颜色主题
			}).show();
		},
		complete: function(){
			//
		}
    });
};

</script>

</html>